<template>
  <div>
    <div
      ref="line-container"
      :style="{ width: style1.width + 'px', height: style1.height + 'px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lineChart",
  props: {
    style1: {
      type: Object,
      default: () => {},
    },
    title:{
      type:String,
      default:() => {
        return  '最近30天识别虫情走势'
      }
    }
  },
  methods: {
    initChart() {
      const dom = this.$refs['line-container']
      var myChart = echarts.init(dom);
      const option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: this.title,
          top:20,
          textStyle:{
            color:'#fff',
            fontSize:'14px',
            fontWeight:'400'
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "2024-12-20",
              "2024-12-21",
              "2024-12-22",
              "2024-12-23",
              "2024-12-24",
            ],
            axisLabel: {
              fontSize: 8, // 修改字体大小
              color:'#fff'
            }
          },
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              fontSize: 10, // 修改字体大小
              color:'#fff'
            },
            // 去掉背景刻度线
            splitLine:{
              show:false
            }
          },
        ],
        series: [
          {
            name: "识虫数",
            type: "line",
            stack: "Total",
            backgroundColor: "#00B23C",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 178, 60, 0.8)",
                },
                 {
                  offset: 0.5,
                  color: "rgba(0, 178, 60, 0.4)",
                },
                {
                  offset: 0.9,
                  color: "rgba(0, 178, 60, 0.1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 178, 60, 0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [5, 6, 4, 2, 5],
          },
        ],
        }
      myChart.setOption(option);
    },
  },
  mounted() {
    console.log(this.style);

    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
</style>
